<template>
  <div id="banjiao">
    <el-dialog
      v-model="isShowAI"
      :close-on-click-modal="false"
      width="80%"
      align-center
      :before-close="handleClose"
    >
      <div class="my-dialog">
        <div v-if="isShowAI" class="my-dialog-content">
          <iframe
            width="100%"
            height="100%"
            :src="dialogUrl"
            frameborder="0"
          ></iframe>
          <!-- <Agent2 /> -->
        </div>
      </div>
    </el-dialog>
    <div class="all-tab-2">
      <div
        v-for="(item, index) in tabCategory"
        :key="index"
        v-show="!(roles === 'student' && index === 1)"
        :class="{ active: tabIndex === index + 1 }"
        @click="changeTab(index + 1, item)"
      >
        {{ item.keyValue }}
      </div>
      <!-- <div :class="{ active: tabIndex === 1 }" @click="changeTab(1)">
        AI学伴
      </div>
      <div
        v-if="roles === 'teacher'"
        :class="{ active: tabIndex === 2 }"
        @click="changeTab(2)"
      >
        AI伴教
      </div> -->
    </div>
    <div class="step-three-content">
      <div :class="{ active: tabIndex === 1 }" class="step-tab1">
        <div class="tab1-one">
          <div class="three-left">
            <!-- 引入视频ren.mp4,宽度50px -->
            <!-- <video
              class="video-player"
              ref="videoPlayer"
              width="255"
              muted
              @click="togglePlay"
            >
              <source src="@/assets/dd2.mp4" type="video/mp4" />
              您的浏览器不支持 video 标签。
            </video> -->
            <div class="video-player">
              <img src="@/assets/img/xueban-bot.png" alt="" />
            </div>
            <img class="left-bg" src="@/assets/img/xueban.png" />
            <div class="three-btn" @click="handleClick('xueban', 0)">
              立即体验
              <img src="@/assets/img/home/three-btn.png" />
            </div>
            <!-- <div class="edit-btns left-btns">
              <div class="edit-btn">
                <el-icon>
                  <Edit />
                </el-icon>
                修改
              </div>
              <div class="edit-btn">
                <el-icon>
                  <Close />
                </el-icon>
                删除
              </div>
            </div> -->
          </div>
          <!-- <div class="three-right">
          <div @click="handleClick('xueban',1)">
            <div class="right-1">
              <div class="three-title">代码解释助手</div>
              <div class="three-content">AI编程辅助工具，专为学生理解代码设计，深入分 析代码结构，提供多语言语法解释，提升代码可读 性。</div>
            </div>
            <div class="right-2">
              <img src="@/assets/img/home/right1.png">
            </div>
          </div>
          <div @click="handleClick('xueban',2)">
            <div class="right-1">
              <div class="three-title">AI图像工程面试官</div>
              <div class="three-content">大模型模拟科技公司面试官，针对图像工程领域， 提出5-10个技术性问题，评估候选人技术水平。</div>
            </div>
            <div class="right-2">
              <img src="@/assets/img/home/right2.png">
            </div>
          </div>
          <div @click="handleClick('xueban',3)">
            <div class="right-1">
              <div class="three-title">AI图像工程学伴</div>
              <div class="three-content">图像工程AI学习学伴，您的私人辅导专家，擅长解决 图像工程专业难题，依托丰富的图像工程知识库，精 通图像理解、处理与生成等图像</div>
            </div>
            <div class="right-2">
              <img src="@/assets/img/home/right3.png">
            </div>
          </div>
        </div> -->
          <div class="three-right">
            <!-- <div
            v-show="index !== 0"
            v-for="(item, index) in urlList['xueban']"
            :key="index"
          >
            <div class="right-1">
              <div class="three-title">{{ item.agentName }}</div>
              <div class="three-content">
                {{ item.des }}
              </div>
            </div>
            <div class="right-2">
              <img src="@/assets/img/home/right1.png">
            </div>
          </div> -->
            <div
              v-for="(item, index) in xuebanList.slice(1, 4)"
              :key="index"
              @click="handleClick('', index + 1, item)"
            >
              <div class="right-1">
                <div class="three-title">{{ item.name }}</div>
                <div class="three-content" :title="item.introduction">
                  {{ item.introduction }}
                </div>
                <div class="create-name">创建人：{{ item.userName }}</div>
              </div>
              <div class="right-2">
                <img :src="item.iconUrl" />
              </div>
              <div class="edit-btns right-btns" v-if="item.edit">
                <div class="edit-btn" @click.stop="editZhinengti(item)">
                  <el-icon>
                    <Edit />
                  </el-icon>
                  修改
                </div>
                <div class="edit-btn" @click.stop="deleteZhinengti(item)">
                  <el-icon>
                    <Close />
                  </el-icon>
                  删除
                </div>
              </div>
            </div>
            <!-- <div @click="handleClick('xueban', 2)">
            <div class="right-1">
              <div class="three-title">课前预习</div>
              <div class="three-content">
                课前预习是您的高效学习领航员，不管是梳理教材脉络、标记疑难重点，还是搭建知识框架，我都能为您定制专属预习方案与多元学习方法，助力您提前掌握课堂核心要点。
              </div>
            </div>
            <div class="right-2">
              <img src="@/assets/img/home/right2.png" />
            </div>
          </div>
          <div @click="handleClick('xueban', 3)">
            <div class="right-1">
              <div class="three-title">AI图像工程面试官</div>
              <div class="three-content">
                大模型模拟科技公司面试官，针对图像工程领域，提
                出5-10个技术性问题，评估候选人技术水平。
              </div>
            </div>
            <div class="right-2">
              <img src="@/assets/img/home/right3.png" />
            </div>
          </div> -->
          </div>
        </div>

        <div class="tab1-two">
          <!-- 剩余的智能体列表 -->
          <div class="three-bottom-list">
            <div
              v-for="(item, index) in xuebanList.slice(4)"
              :key="index"
              @click="handleClick('', index + 1, item)"
            >
              <div class="right-1">
                <div class="three-title">{{ item.name }}</div>
                <div class="three-content" :title="item.introduction">
                  {{ item.introduction }}
                </div>
                <div class="create-name">创建人：{{ item.userName }}</div>
              </div>
              <div class="right-2">
                <img :src="item.iconUrl" />
              </div>
              <div class="edit-btns right-btns" v-if="item.edit">
                <div class="edit-btn" @click.stop="editZhinengti(item)">
                  <el-icon>
                    <Edit />
                  </el-icon>
                  修改
                </div>
                <div class="edit-btn" @click.stop="deleteZhinengti(item)">
                  <el-icon>
                    <Close />
                  </el-icon>
                  删除
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="{ active: tabIndex === 2 }" class="step-tab2">
        <div
          v-for="(item, index) in banjiaoList"
          :key="index"
          @click="handleClick2(item)"
        >
          <div class="tab2-left">
            <div class="tab2-title">{{ item.name }}</div>
            <div class="tab2-content" :title="item.introduction">
              {{ item.introduction }}
            </div>
            <div class="create-name">创建人：{{ item.userName }}</div>
          </div>
          <div class="tab2-right">
            <img :src="item.iconUrl" />
          </div>
          <div class="edit-btns right-btns" v-if="item.edit">
            <div class="edit-btn" @click.stop="editZhinengti(item)">
              <el-icon>
                <Edit />
              </el-icon>
              修改
            </div>
            <div class="edit-btn" @click.stop="deleteZhinengti(item)">
              <el-icon>
                <Close />
              </el-icon>
              删除
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import Agent2 from "@/components/Agent2.vue";
import { time } from "echarts";
export default {
  props: {
    tabCategory: {
      type: Array,
      default: () => [],
    },
    xuebanList: {
      type: Array,
      default: () => [],
    },
    banjiaoList: {
      type: Array,
      default: () => [],
    },
  },

  components: {
    Agent2,
  },
  data() {
    return {
      roles: "",
      dialogUrl: "",
      isShowAI: false,
      tabIndex: 1,
    };
  },
  created() {
    this.roles = JSON.parse(localStorage.getItem("userInfo")).roles[0];
    // this.getUrlList();
  },
  mounted() {
    // this.playWithSound();
  },
  methods: {
    togglePlay() {
      const video = this.$refs.videoPlayer;
      if (video.paused) {
        video.play();
      } else {
        video.pause();
      }
    },
    handleClose() {
      this.isShowAI = false;
    },
    handleClick(type, index, item) {
      // this.isShowAI = true;
      // this.dialogUrl = this.urlList[type][index].stepAddr;
      // this.isShowAI = true;
      if (type == "xueban") {
        window.open(this.xuebanList[index].url);
      } else {
        window.open(item.url);
      }
    },
    handleClick2(item) {
      // this.dialogUrl = item.stepAddr;
      // this.isShowAI = true;
      window.open(item.url);
    },

    // 切换分类
    changeTab(index, item) {
      this.tabIndex = index;
      this.$emit("changeTab", item.id, item.keyValue);
    },

    // 修改智能体
    editZhinengti(item) {
      this.$emit("editZhinengti", item);
    },

    // 删除智能体
    deleteZhinengti(item) {
      this.$emit("deleteZhinengti", item);
    },

    playWithSound() {
      const video = this.$refs.videoPlayer;
      // 确保视频没有静音
      video.muted = false;
      video.play().catch((error) => {
        console.error("播放失败：", error);
        // alert("请确保您已与页面进行了交互（如点击），然后重试！");
      });
    },
    getList() {
      const url = "/dify//xuebaniiaolist?bookInfoId=1";
      const params = this.form;
      this.loading = true;
      this.$axios
        .get(url, {
          params, // 将参数传递给 `params` 属性
        })
        .then((response) => {
          const res = response;
          this.tableData = res.data;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getUrlList() {
      const url = "/dify/xuebanjiaolist?bookInfoId=1";
      this.$axios
        .get(url)
        .then((response) => {
          const res = response;
          this.urlList = res.data;
          console.log(this.urlList, 345);
          if (res.data.zhujiao.length) {
            this.tea2List.forEach((item, index) => {
              item.stepAddr = res.data.zhujiao[index].stepAddr;
            });
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss">
#banjiao {
  .step-three-content {
    .step-tab1 {
      display: none;
      gap: 20px;
      &.active {
        display: block;
      }
      .tab1-one {
        display: flex;
        justify-content: space-between;
        .three-left {
          width: calc(50% - 20px);
          height: 669px;
          box-sizing: border-box;
          position: relative;
          background: linear-gradient(90deg, #ffffff, #d5e5fe);
          box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
          .three-btn {
            position: absolute;
            bottom: 77px;
            left: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 140px;
            height: 45px;
            background: linear-gradient(90deg, #0dbcff, #4c84ff);
            border-radius: 4px;
            font-weight: bold;
            font-size: 16px;
            color: #ffffff;
            cursor: pointer;
            &:hover {
              background: linear-gradient(180deg, #0dbcff, #4c84ff);
            }
          }
          .left-bg {
            position: absolute;
            top: 50px;
            left: 30px;
            width: 85%;
            object-fit: cover;
            // @media (max-width: 1600px) {
            //   width: 450px;
            //   height: 180px;
            // }
            // @media (max-width: 1400px) {
            //   width: 400px;
            //   height: 160px;
            // }
            // @media (max-width: 1280px) {
            //   width: 350px;
            //   height: 140px;
            // }
            // @media (max-width: 800px) {
            //   width: 300px;
            //   height: 120px;
            // }
          }
          .video-player {
            position: absolute;
            bottom: 15px;
            right: 15px;
          }
        }
        .three-right {
          width: calc(50% - 20px);
          display: flex;
          flex-direction: column;
          gap: 20px;
          > div {
            position: relative;
            transition: all 0.3s ease-in-out;
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: 50px 57px 20px 35px;
            height: 210px;
            background: linear-gradient(180deg, #ffffff, #f1f5ff);
            box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
            border-radius: 10px;
            border: 1px solid #ffffff;
            box-sizing: border-box;
            padding-right: 57px;
            cursor: pointer;
            &:hover {
              transform: scale(1.02);
            }
            .right-1 {
              flex: 1;
              box-sizing: border-box;
              .three-title {
                max-width: 378px;
                overflow: hidden;
                white-space: normal;
                text-overflow: ellipsis;
                font-weight: 400;
                font-size: 24px;
                color: #457aff;
                margin-bottom: 20px;
              }
              .three-content {
                font-size: 14px;
                color: #4b5b76;
                line-height: 24px;
                max-width: 520px;
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
              .create-name {
                position: absolute;
                bottom: 10px;
                left: 35px;
                font-size: 14px;
                color: #4b5b76;
                margin-top: 20px;
              }
            }
            .right-2 {
              display: flex;
              align-items: center;
              width: 100px;
              height: 100px;
              img {
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            }
          }
        }
      }
      .tab1-two {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        .three-bottom-list {
          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          > div {
            width: calc(50% - 20px);
            position: relative;
            transition: all 0.3s ease-in-out;
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 20px;
            padding: 50px 57px 20px 35px;
            height: 210px;
            background: linear-gradient(180deg, #ffffff, #f1f5ff);
            box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
            border-radius: 10px;
            border: 1px solid #ffffff;
            box-sizing: border-box;
            padding-right: 57px;
            cursor: pointer;
            &:hover {
              transform: scale(1.02);
            }
            .right-1 {
              flex: 1;
              box-sizing: border-box;
              .three-title {
                max-width: 378px;
                overflow: hidden;
                white-space: normal;
                text-overflow: ellipsis;
                font-weight: 400;
                font-size: 24px;
                color: #457aff;
                margin-bottom: 20px;
              }
              .three-content {
                font-size: 14px;
                color: #4b5b76;
                line-height: 24px;
                max-width: 520px;
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
              .create-name {
                position: absolute;
                bottom: 10px;
                left: 35px;
                font-size: 14px;
                color: #4b5b76;
                margin-top: 20px;
              }
            }
            .right-2 {
              display: flex;
              align-items: center;
              width: 100px;
              height: 100px;
              img {
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            }
          }
        }
      }
    }
    .step-tab2 {
      display: none;
      flex-wrap: wrap;
      gap: 20px;
      &.active {
        display: flex;
      }
      > div {
        width: calc(50% - 20px);
        position: relative;
        transition: all 0.3s ease-in-out;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding: 50px 57px 20px 35px;
        height: 210px;
        background: linear-gradient(180deg, #ffffff, #f1f5ff);
        box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
        border-radius: 10px;
        border: 1px solid #ffffff;
        box-sizing: border-box;
        padding-right: 57px;
        cursor: pointer;
        &:hover {
          transform: scale(1.02);
        }
        .tab2-left {
          flex: 1;
          box-sizing: border-box;
          .tab2-content {
            max-width: 520px;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .create-name {
            position: absolute;
            bottom: 10px;
            left: 35px;
            font-size: 14px;
            color: #4b5b76;
            margin-top: 20px;
          }
        }
        .tab2-right {
          display: flex;
          align-items: center;
          width: 100px;
          height: 100px;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        .tab2-title {
          max-width: 378px;
          overflow: hidden;
          white-space: normal;
          text-overflow: ellipsis;
          font-weight: 400;
          font-size: 24px;
          color: #457aff;
          margin-bottom: 20px;
        }
        .tab2-content {
          font-size: 14px;
          color: #4b5b76;
          line-height: 24px;
        }
      }
    }
  }
  .agent-wrap {
    position: fixed;
    width: 80%;
    height: 80%;
    z-index: 1;
  }
  .el-dialog {
    background: none;
    box-shadow: none;
    .my-dialog {
      padding: 10px 0;
    }
    .my-dialog-content {
      height: 80vh;
      iframe {
        height: 100%;
      }
    }
    .el-dialog__close {
      color: #333;
      background: #aaabad;
      border-radius: 50%;
      padding: 2px;
    }
  }
  .edit-btns {
    position: absolute;
    display: flex;
    gap: 20px;
    &.left-btns {
      top: 20px;
      right: 25px;
    }
    &.right-btns {
      bottom: 10px;
      right: 15px;
    }
    .edit-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      color: #457aff;
      cursor: pointer;
      .el-icon {
        font-size: 18px;
      }
      &:hover {
        color: #0dbcff;
      }
    }
  }
  //媒体查询
  @media (max-width: 1710px) {
    .step-three-content {
      .step-tab1 {
        flex-wrap: wrap;
      }
      .three-left,
      .left-bg {
        width: 100%;
      }
    }
  }
}
</style>